<template>
  <div class="bg_f4 loginwrapper">
    <div class="flexcenter full_w loginbody">
      <div class="loginleft bg_fff login_r">
        <div class="login_title c_000">登录锐行互联账号</div>
        <div class="f-18 c_000 textcenter title">用户注册</div>
        <el-form
          :model="phoneform"
          :rules="phonerules"
          ref="phoneform"
          class="loginform"
        >
          <el-form-item label="" prop="phone">
            <el-input
              v-model="phoneform.phone"
              auto-complete="off"
              placeholder="请输入手机号码"
            >
              <svg-icon slot="prefix" icon-class="mobile" class="el-input__icon input-icon" />
            </el-input>
          </el-form-item>
          <el-form-item label="" prop="password">
            <el-input
              v-model="phoneform.password"
              type="password"
              auto-complete="off"
              placeholder="请输入密码"
              show-password
            >
              <svg-icon
                slot="prefix"
                icon-class="psd"
                class="el-input__icon input-icon"
              />
            </el-input>
          </el-form-item>
          <el-form-item label="" prop="code" class="codeiput">
            <el-input
              v-model="phoneform.code"
              auto-complete="off"
              placeholder="请输入短信验证码"
              @keyup.enter.native="handleRejister"
            >
              <svg-icon
                slot="prefix"
                icon-class="yzcode"
                class="el-input__icon input-icon"
              />
            </el-input>
            <span class="codebox">
              <span class="codeline"></span>
              <span class="c_primary commhover" v-if="code=='获取验证码'" @click="gain"> {{code}}</span>
              <span v-else class="c_primary commhover" >{{code}}</span>
            </span>
          </el-form-item>
          <el-form-item label="" prop="rememberMe">
            <el-checkbox v-model="phoneform.rememberMe" class="f-12">
              我已阅读并同意<span class="c_primary">用户协议、隐私政策、数据推广服务协议及XXXX广告系统账号用户协议</span>
            </el-checkbox>
          </el-form-item>
          <el-form-item style="width: 100%">
            <el-button
              :loading="loading"
              size="large"
              type="primary"
              style="width: 100%"
              @click.native.prevent="handleRejister"
            >
              <span v-if="!loading">登 录</span>
              <span v-else>登 录 中...</span>
            </el-button>
            <!-- <div class="flexrowbetween"> -->
            <div class="flexend mt_5">
              <div>
                已有账号？
                <span class="c_primary commhover" @click="goPage('/login')">返回登录</span>
              </div>
              <!-- <div class="c_primary"></div> -->
            </div>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>   

<script>
import { LoginNavbar } from "@/layout/components";
import Cookies from "js-cookie";
import { sendCodereg } from '@/api/login'
import { validPhone } from '@/utils/validate'

export default {
  data() {
    var validatePass = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请阅读相关协议后勾选已阅读同意'));
      } else {
        callback();
      }
    };
    return {
      phoneform:{
        phone:'',
        password:'',
        code:'',
        rememberMe:false
      },
      phonerules:{
        phone: [
          { required: true, trigger: "blur", validator: validPhone },
        ],
        password: [
          { required: true, trigger: "blur", message: "请输入密码" },
        ],
        code: [
          { required: true, trigger: "blur", message: "验证码不能为空" },
        ],
        rememberMe: [
          { validator:validatePass, trigger: 'blur' },
        ],
      },
      loading: false,
      code:'获取验证码'
    };
  },
  components: {
    LoginNavbar,
  },
  mounted() {},
  methods: {

    handleClick() {},

    register() {},

    // links() {},
    // enter1(e) {},
    _isMobile() {
      let flag = navigator.userAgent.match(
        /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
      );
      return flag;
    },

    //获取验证码
    gain() {
      this.codeEvent(this.phoneform.phone);
    },
    //封装验证码的函数
    codeEvent(iphone) {
      console.log(iphone)
      let reg = /^1[0-9]{10}$/;
      if (!reg.test(iphone)) {
        this.$message({
          message: "请输入正确手机号!",
          type: "warning",
          offset: 150,
        });
      } else {
        sendCodereg({
          phone: iphone,
        }).then(() => {
          this.countDown(60);
        });
      }
    },
    //验证码倒计时
    countDown(time) {
      let _this = this;
      time--;
      if (time == 0) {
        _this.code = "获取验证码";
        return;
      }
      setTimeout(function () {
        _this.code = time + "秒";
        _this.countDown(time);
      }, 1000);
    },

    handleRejister(){
      this.$refs.phoneform.validate(valid => {
        if(!valid) return
        this.loading = true;
        this.$store.dispatch("PhoneRegister", this.phoneform).then(() => {
          this.$router.push({ path: "/" }).catch(()=>{});
        }).catch(() => {
          this.loading = false;
        });
      })
    },

    goPage(page){
      this.$router.push({path:page})
    }
  },
};
</script>

<style lang="scss" scoped>
.title{
  // height: 50px;
  padding-bottom: 8px;
  border-bottom: 1px solid #EDF0F4;
  font-weight: 500;
  position: relative;

  &::after{
    content: "";
    position: absolute;
    left: calc(50% - 40px);
    bottom: 0;
    width:80px;
    height: 3px;
    background-color: #1670F1;
  }
}
.loginwrapper {
  width: 100%;
  height: 100%;
  background:url('~@/assets/images/bg.jpg') no-repeat;
  background-size: cover;
}
.loginleft {
  width: 462px;
  // height: 500px;
  position: relative;
  .login_title{
    font-size: 32px;
    margin-bottom: 36px;
    font-weight: 500;
    text-align: center;
  }
  .leftcontent{
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    padding: 80px 50px 30px;
  }
  .loginside {
    width: 100%;
    height: 100%;
  }
}
.loginbody {
  width: 100%;
  height: 100vh;
  justify-content: flex-end;
  padding-right: 15%;
}
.login_r {
  padding: 40px 0 32px;
}
.loginform{
    padding-top: 30px;
    width: 80%;
    margin: auto;
    ::v-deep .el-input__inner{
      border-color: #EDF0F4;
      height: 46px;
      line-height: 46px;
    }
    ::v-deep .el-input--prefix .el-input__inner{
        padding-left:45px
    }
    ::v-deep .el-input__prefix{
        left: 20px;
    }
    ::v-deep .svg-icon{
      width: 16px;
      height: 100%;
      color: #000;
    }
    ::v-deep .el-checkbox__label{
      white-space: normal
    }
    ::v-deep .el-checkbox{
      .el-checkbox__input{
        vertical-align: top;
        padding-top: 4px;
      }
    }
}
.el-form-item{
  margin-bottom: 18px;
}
.el-button{
  border-radius: 0;
}
.codeiput{
    position: relative;
    ::v-deep .el-input__inner{
       padding-right: 100px;
    }
}
.codebox{
  position: absolute;
  right: 10px;
  height: 46px;
  line-height: 46px;
  top: 0;
  display: flex;
  align-items: center;
}
.zcbtn{
  height: 37px;
  width: 200px;
  border: 1px solid #FFFFFF;
  border-radius: 20px;
  margin: auto;
}
.codeline{
  display: inline-block;
  height: 27px;
  width: 1px;
  background-color: #EDF0F4;
  margin-right: 8px;
}
</style>
